<template>
    <div class="form-block-inner">
        <Form ref="formItem" :rules="ruleValidate" :model="formItem" label-position="top">
            <div class="title-style">基本信息</div>
            <Row :gutter="16">
                <!--<Col span="6">
                    <FormItem prop="shi_quan_type" label="设定事权类型:">
                        <div class="form-element">
                            <Input v-model="formItem.shi_quan_type" clearable placeholder="请填写事权类型"/>
                        </div>
                    </FormItem>
                </Col>-->
                <Col span="8">
                    <FormItem prop="title" label="填报事项名称:">
                        <!--<span slot="label">填报事项名称:
                            <Tooltip content="填报事项名称的说明........" placement="right" theme="light">
                                <Icon type="md-help-circle" class="excel-help"/>
                            </Tooltip>
                        </span>-->
                        <Input v-model="title" readonly placeholder="请选择事项库"/>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem prop="xing_quan_code" label="行权事项编码:">
                        <Input v-model="formItem.xing_quan_code" readonly placeholder="请选择事项库"/>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem label=" ">
                        <Button @click="powerChooseOption">选择事项库</Button>
                    </FormItem>
                </Col>
                <Col span="24">
                    <FormItem prop="shi_quan_type" label="设定事项责任:">
                        <div class="form-element">
                            <Input v-model="formItem.shi_quan_type" type="textarea" readonly
                                   :autosize="{minRows: 3,maxRows: 3}"
                                   placeholder="请选择事项库"></Input>
                        </div>
                    </FormItem>
                </Col>
                <Col span="24">
                    <FormItem prop="shi_xiang_remark" label="填写事项说明：">
                        <Input v-model="formItem.shi_xiang_remark" type="textarea" :autosize="{minRows: 3,maxRows: 3}"
                               placeholder="请填写事项说明"></Input>
                    </FormItem>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <Col span="8">
                            <FormItem prop="jue_ding_gov" label="决定机构:">
                                <div class="form-element">
                                    <Input v-model="formItem.jue_ding_gov" clearable placeholder="请填写决定机构"/>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem prop="jue_ding_gov_xing_zhi" label="决定机构性质:">
                                <div class="form-element">
                                    <Select clearable v-model="formItem.jue_ding_gov_xing_zhi" style="width:100%">
                                        <Option v-for="(item,index) in jdgxzList" :value="item.value" :key="index">
                                            {{item.label}}
                                        </Option>
                                    </Select>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="8" v-if="formItem.jue_ding_gov_xing_zhi == 4">
                            <FormItem prop="cus_jdgxz" label="决定机构性质（自定义）:">
                                <div class="form-element">
                                    <Input v-model="formItem.cus_jdgxz" clearable placeholder="请填写自定义决定机构性质"/>
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                </Col>
                <Col span="24">
                    <Row :gutter="16">
                        <Col span="8">
                            <FormItem prop="shou_li_gov" label="受理机构:">
                                <div class="form-element">
                                    <Input v-model="formItem.shou_li_gov" clearable placeholder="请填写受理事项机构"/>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem prop="shou_li_gov_xing_zhi" label="受理机构性质:">
                                <Select clearable v-model="formItem.shou_li_gov_xing_zhi" style="width:100%">
                                    <Option v-for="(item,index) in slgxzList" :value="item.value" :key="index">
                                        {{item.label}}
                                    </Option>
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span="8" v-if="formItem.shou_li_gov_xing_zhi == 4">
                            <FormItem prop="cus_slgxz" label="受理机构性质（自定义）:">
                                <div class="form-element">
                                    <Input v-model="formItem.cus_slgxz" clearable placeholder="请填写自定义受理机构性质"/>
                                </div>
                            </FormItem>
                        </Col>
                    </Row>
                </Col>
                <Col span="18">
                    <FormItem prop="san_ding_yi_ju" label="三定方案依据：">
                        <Input clearable v-model="formItem.san_ding_yi_ju" placeholder="请填写三定方案依据"></Input>
                    </FormItem>
                </Col>
                <Col span="4">
                    <FormItem prop="san_ding_yi_ju_url" label="依据材料：">
                        <Button icon="ios-cloud-upload-outline" @click="uploadImgAction('san_ding')">上传</Button>
                        <span class="upload-icon">
                            <Icon :type="formItem.san_ding_yi_ju_url ? 'md-checkmark-circle' : 'md-close-circle'"
                                  :color="formItem.san_ding_yi_ju_url ? 'green' : 'red'"
                                  size="18" />
                        </span>
                    </FormItem>
                </Col>
                <Col span="18">
                    <FormItem prop="fa_lv_fa_gui_yi_ju" label="法律法规依据：">
                        <Input clearable v-model="formItem.fa_lv_fa_gui_yi_ju" placeholder="请填写法律法规依据"></Input>
                    </FormItem>
                </Col>

                <Col span="4">
                    <FormItem prop="fa_lv_fa_gui_yi_ju_url" label="依据材料：">
                        <Button icon="ios-cloud-upload-outline" @click="uploadImgAction('fa_lv_fa_gui')">上传</Button>
                        <span class="upload-icon">
                            <Icon :type="formItem.fa_lv_fa_gui_yi_ju_url ? 'md-checkmark-circle' : 'md-close-circle'"
                                  :color="formItem.fa_lv_fa_gui_yi_ju_url ? 'green' : 'red'"
                                  size="18" />
                        </span>
                    </FormItem>
                </Col>
                <Col span="18">
                    <FormItem prop="wen_jian_yi_ju" label="国家、省、市相关文件依据：">
                        <Input clearable v-model="formItem.wen_jian_yi_ju" placeholder="请填写国家、省、市相关文件依据"></Input>
                    </FormItem>
                </Col>
                <Col span="4">
                    <FormItem prop="wen_jian_yi_ju_url" label="依据材料：">
                        <Button icon="ios-cloud-upload-outline" @click="uploadImgAction('wen_jian')">上传</Button>
                        <span class="upload-icon">
                            <Icon :type="formItem.wen_jian_yi_ju_url ? 'md-checkmark-circle' : 'md-close-circle'"
                                  :color="formItem.wen_jian_yi_ju_url ? 'green' : 'red'"
                                  size="18" />
                        </span>
                    </FormItem>
                </Col>
                <Col span="18">
                    <FormItem prop="ban_jian_xing_shi" label="办理形式:">
                        <CheckboxGroup v-model="formItem.ban_jian_xing_shi">
                            <Checkbox label="窗口办理"></Checkbox>
                            <Checkbox label="网上办理"></Checkbox>
                            <Checkbox label="快递申请"></Checkbox>
                            <Checkbox label="受办分离"></Checkbox>
                            <Checkbox label="监督检查"></Checkbox>
                            <Checkbox label="举报投诉"></Checkbox>
                            <Checkbox label="书面申请"></Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="is_shou_fei" label="是否收费:">
                        <RadioGroup v-model="formItem.is_shou_fei">
                            <Radio label="1">收费</Radio>
                            <Radio label="2">不收费</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem prop="ban_jian_type" label="办件类型:">
                        <RadioGroup v-model="formItem.ban_jian_type">
                            <Radio label="1">即办件</Radio>
                            <Radio label="2">承诺件</Radio>
                            <Radio label="3">其他</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <template v-if="formItem.ban_jian_type == '2'">
                    <Col span="12">
                        <FormItem prop="date_type" label="承诺期限类型:">
                            <RadioGroup v-model="formItem.date_type">
                                <Radio label="1">自然日</Radio>
                                <Radio label="2">工作日</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem prop="zhou_qi" label="承诺期限（天）:">
                            <div class="form-element">
                                <Input clearable v-model="formItem.zhou_qi" placeholder="事项办理总期限"/>
                            </div>
                        </FormItem>
                    </Col>
                </template>
                <Col span="24">
                    <FormItem prop="fu_wu_dui_xiang" label="服务对象:">
                        <CheckboxGroup v-model="formItem.fu_wu_dui_xiang">
                            <Checkbox label="自然人"></Checkbox>
                            <Checkbox label="企业法人"></Checkbox>
                            <Checkbox label="事业法人"></Checkbox>
                            <Checkbox label="社会组织法人"></Checkbox>
                            <Checkbox label="非法人企业"></Checkbox>
                            <Checkbox label="行政机关"></Checkbox>
                            <Checkbox label="其他组织"></Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="ban_li_address" label="办理地点:">
                        <div class="form-element">
                            <Input clearable v-model="formItem.ban_li_address" placeholder="请填写受理事项机构的地址"/>
                        </div>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="work_run_time" label="工作时间:">
                        <div class="form-element">
                            <Input clearable v-model="formItem.work_run_time" placeholder="请填写受理事项机构的工作时间"/>
                        </div>
                    </FormItem>
                </Col>
                <Col span="6">
                    <FormItem prop="zi_xun_type" label="咨询方式:">
                        <div class="form-element">
                            <Input clearable v-model="formItem.zi_xun_type" placeholder="请填写咨询方式"/>
                        </div>
                    </FormItem>
                </Col>
            </Row>
            <Divider/>
            <div class="button-group">
                <Button type="primary" @click="saveBtnAction" :loading="btnLoading">保存数据</Button>
            </div>
        </Form>
        <import-imgs ref="imgService" @result="importImgsResultAction"></import-imgs>
        <option-modal :base-type="formItem.type" ref="optionModal" :modal-title="modalTitle" :dataObj="modalData"
                      @saveOption="saveOption"></option-modal>
    </div>
</template>

<script>
import {
  insertSstGovBase,
  updateSstGovBase,
  selectSstGovBaseById
} from '@/api/setting/base-info'
import OptionModal from './components/option-modal/index'
import ImportImgs from './components/import-imgs/index'

export default {
  name: 'BaseInfo',
  components: { ImportImgs, OptionModal },
  data () {
    const validateTitle = (rule, value, callback) => {
      if (!this.title) {
        callback(new Error('填报事项名称不能为空'))
      } else {
        callback()
      }
    }
    const validateBJXS = (rule, value, callback) => {
      if (this.formItem.ban_jian_xing_shi.length === 0) {
        callback(new Error('办理形式不能为空'))
      } else {
        callback()
      }
    }
    const validateFWDX = (rule, value, callback) => {
      if (this.formItem.fu_wu_dui_xiang.length === 0) {
        callback(new Error('服务对象不能为空'))
      } else {
        callback()
      }
    }
    const validateJDGXZ = (rule, value, callback) => {
      if (this.formItem.jue_ding_gov_xing_zhi === '4' && !value) {
        callback(new Error('自定义决定机构性质不能为空'))
      } else {
        callback()
      }
    }
    const validateSLGXZ = (rule, value, callback) => {
      if (this.formItem.shou_li_gov_xing_zhi === '4' && !value) {
        callback(new Error('自定义受理机构性质不能为空'))
      } else {
        callback()
      }
    }
    const validateDT = (rule, value, callback) => {
      if (this.formItem.ban_jian_type === '2' && !value) {
        callback(new Error('承诺期限类型不能为空'))
      } else {
        callback()
      }
    }
    const validateZQ = (rule, value, callback) => {
      if (this.formItem.ban_jian_type === '2' && !value) {
        callback(new Error('承诺期限不能为空'))
      } else {
        callback()
      }
    }
    return {
      ruleValidate: {
        // shi_quan_type: [
        //   { required: true, message: '设定事权类型不能为空', trigger: 'blur' }
        // ],
        // shi_quan_type: [
        //   { required: true, message: '事项责任不能为空', trigger: 'blur' }
        // ],
        title: [
          { required: true, validator: validateTitle, trigger: 'blur' }
        ],
        // xing_quan_code: [
        //   { required: true, message: '行权事项编码不能为空', trigger: 'blur' }
        // ],
        // shi_xiang_remark: [
        //   { required: true, message: '事项说明不能为空', trigger: 'blur' }
        // ],
        jue_ding_gov: [
          { required: true, message: '决定机构不能为空', trigger: 'blur' }
        ],
        jue_ding_gov_xing_zhi: [
          { required: true, message: '决定机构性质不能为空', trigger: 'change' }
        ],
        cus_jdgxz: [
          { required: true, validator: validateJDGXZ, trigger: 'blur' }
        ],
        shou_li_gov: [
          { required: true, message: '受理机构不能为空', trigger: 'blur' }
        ],
        shou_li_gov_xing_zhi: [
          { required: true, message: '受理机构性质不能为空', trigger: 'change' }
        ],
        cus_slgxz: [
          { required: true, validator: validateSLGXZ, trigger: 'blur' }
        ],
        // san_ding_yi_ju: [
        //   { required: true, message: '三定方案依据不能为空', trigger: 'blur' }
        // ],
        // fa_lv_fa_gui_yi_ju: [
        //   { required: true, message: '法律法规依据不能为空', trigger: 'blur' }
        // ],
        // wen_jian_yi_ju: [
        //   { required: true, message: '国家、省、市相关文件依据不能为空', trigger: 'blur' }
        // ],
        ban_jian_xing_shi: [
          { required: true, validator: validateBJXS, trigger: 'change' }
        ],
        is_shou_fei: [
          { required: true, message: '是否收费不能为空', trigger: 'change' }
        ],
        ban_jian_type: [
          { required: true, message: '办件类型不能为空', trigger: 'change' }
        ],
        date_type: [
          { required: true, validator: validateDT, trigger: 'change' }
        ],
        zhou_qi: [
          { required: true, validator: validateZQ, trigger: 'blur' }
        ],
        fu_wu_dui_xiang: [
          { required: true, validator: validateFWDX, trigger: 'change' }
        ]
      },
      formItem: {
        // shi_quan_type: '',
        project_name: '',
        subitem: '',
        xing_quan_code: '',
        shi_xiang_remark: '',
        jue_ding_gov: '',
        jue_ding_gov_xing_zhi: '',
        cus_jdgxz: '',
        shou_li_gov: '',
        shou_li_gov_xing_zhi: '',
        cus_slgxz: '',
        ban_jian_xing_shi: [],
        ban_jian_type: '',
        san_ding_yi_ju: '',
        san_ding_yi_ju_url: '',
        fa_lv_fa_gui_yi_ju: '',
        fa_lv_fa_gui_yi_ju_url: '',
        wen_jian_yi_ju: '',
        wen_jian_yi_ju_url: '',
        zhou_qi: '',
        is_shou_fei: '',
        fu_wu_dui_xiang: [],
        ban_li_address: '',
        work_run_time: '',
        zi_xun_type: '',
        date_type: '',
        type: '',
        xing_quan_sub_code: ''
        // duty_matter: '',
        // action_subject: '',
        // code: '',
        // sub_code: ''
      },
      btnLoading: false,
      powerList: [],
      jdgxzList: [
        {
          value: '1',
          label: '法定机关'
        },
        {
          value: '2',
          label: '授权组织'
        },
        {
          value: '3',
          label: '受委托组织'
        },
        {
          value: '4',
          label: '其它'
        }
      ],
      slgxzList: [
        {
          value: '1',
          label: '法定机关'
        },
        {
          value: '2',
          label: '授权组织'
        },
        {
          value: '3',
          label: '受委托组织'
        },
        {
          value: '4',
          label: '其它'
        }
      ],
      modalTitle: '',
      modalWidth: 500,
      modalType: '',
      modalData: {},
      optionType: 'add',
      baseID: ''
    }
  },
  computed: {
    getUploadUrl () {
      return this.$config.upLoadFileUrl
    },
    title () {
      if (this.formItem.project_name && !this.formItem.subitem) {
        return this.formItem.project_name
      } else if (this.formItem.project_name && this.formItem.subitem) {
        return this.formItem.project_name + ' （ ' + this.formItem.subitem + ' ）'
      } else {
        return ''
      }
    }
  },
  props: {
    baseType: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  mounted () {
    if (this.$route.query.id) {
      this.baseID = this.$route.query.id
      this.optionType = 'edit'
      this.getInfoByID()
    } else {
      this.optionType = 'add'
    }
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    powerChooseOption () {
      this.modalTitle = '选择事权'
      this.$refs.optionModal.modelAction()
    },
    // 编辑时获取信息
    getInfoByID () {
      selectSstGovBaseById({ id: this.baseID }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.formItem = data.data
          if (this.formItem.type) {
            this.$refs.optionModal.init({ type: this.formItem.type })
          } else {
            this.$Message.error('缺少参数！')
            this.$router.push({ name: 'RouterList' })
          }
        } else {
          this.error(data)
        }
      })
    },
    uploadImgAction (type) {
      let path = ''
      switch (type) {
        case 'san_ding':
          path = this.formItem.san_ding_yi_ju_url
          break
        case 'fa_lv_fa_gui':
          path = this.formItem.fa_lv_fa_gui_yi_ju_url
          break
        case 'wen_jian':
          path = this.formItem.wen_jian_yi_ju_url
          break
      }
      this.$refs.imgService.modelAction(type, path)
    },
    importImgsResultAction (path, type) {
      switch (type) {
        case 'san_ding':
          this.$delete(this.formItem, 'san_ding_yi_ju_url')
          this.formItem.san_ding_yi_ju_url = path
          // this.$set(this.formItem, 'san_ding_yi_ju_url', path)
          break
        case 'fa_lv_fa_gui':
          this.$delete(this.formItem, 'fa_lv_fa_gui_yi_ju_url')
          this.formItem.fa_lv_fa_gui_yi_ju_url = path
          // this.$set(this.formItem, 'fa_lv_fa_gui_yi_ju_url', path)
          break
        case 'wen_jian':
          this.$delete(this.formItem, 'wen_jian_yi_ju_url')
          this.formItem.wen_jian_yi_ju_url = path
          // this.$set(this.formItem, 'wen_jian_yi_ju_url', path)
          break
      }
    },
    // 选择行权后处理
    saveOption (row) {
      // this.$set(this.formItem, 'shi_quan_type', row.duty_matter)
      // this.$set(this.formItem, 'gov_id', row.id)
      // this.$set(this.formItem, 'jue_ding_gov', row.action_subject)
      this.$set(this.formItem, 'project_name', row.project_name)
      this.$set(this.formItem, 'subitem', row.subitem)
      // this.$set(this.formItem, 'xing_quan_code', row.code)
      // this.$set(this.formItem, 'xing_quan_sub_code', row.sub_code)
      this.formItem.shi_quan_type = row.duty_matter
      this.formItem.gov_id = row.id
      this.formItem.jue_ding_gov = row.action_subject
      // this.formItem.project_name = row.project_name
      // this.formItem.subitem = row.subitem
      this.formItem.xing_quan_code = row.code
      this.formItem.xing_quan_sub_code = row.sub_code
    },
    // 保存表单信息
    saveBtnAction (formItem) {
      // if (!this.formItem.san_ding_yi_ju_url) {
      //   this.$Message.warning('请上传三定方案依据材料')
      //   return false
      // }
      // if (!this.formItem.fa_lv_fa_gui_yi_ju_url) {
      //   this.$Message.warning('请上传法律法规依据材料')
      //   return false
      // }
      // if (!this.formItem.wen_jian_yi_ju_url) {
      //   this.$Message.warning('请上传国家、省、市相关文件依据依据材料')
      //   return false
      // }
      let param = {}
      if (this.optionType === 'add') {
        param = this.formItem
        this.$delete(param, 'id')
      } else if (this.optionType === 'edit') {
        param = this.formItem
        if (this.$route.query.id) param.id = this.$route.query.id
      }
      // 数据校验
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          if (this.optionType === 'add') {
            this.addDataAction(param)
          } else if (this.optionType === 'edit') {
            this.updateDataAction(param)
          }
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    },
    updateDataAction (param) {
      this.btnLoading = true
      updateSstGovBase(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.$refs.optionModal.init({ type: this.formItem.type })
          this.success()
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    addDataAction (param) {
      if (this.$route.query.type) {
        param.type = this.$common.xeUtils.clone(this.$route.query.type, true).toString()
      } else {
        this.$Message.error('缺少参数！')
        return false
      }
      this.btnLoading = true
      insertSstGovBase(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.$emit('result', data.data.result)
          this.$router.push({
            name: 'rulePageList',
            query: { id: data.data.result, type: param.type }
          })
          this.$refs.optionModal.init({ type: this.formItem.type })
          this.optionType = 'edit'
          this.success()
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    }
  },
  watch: {
    formItem (val) {
      // 数据处理
      this.formItem.shi_quan_type = val.duty_matter ? val.duty_matter : this.formItem.shi_quan_type
      this.formItem.jue_ding_gov = val.action_subject ? val.action_subject : this.formItem.jue_ding_gov
      this.formItem.xing_quan_code = val.code ? val.code : this.formItem.xing_quan_code
      this.formItem.xing_quan_sub_code = val.sub_code ? val.sub_code : this.formItem.xing_quan_sub_code
      // 多选组为null处理
      if (val.fu_wu_dui_xiang) {
        if (typeof val.fu_wu_dui_xiang === 'string') JSON.parse(val.fu_wu_dui_xiang)
      } else {
        val.fu_wu_dui_xiang = []
      }
      if (val.ban_jian_xing_shi) {
        if (typeof val.ban_jian_xing_shi === 'string') JSON.parse(val.ban_jian_xing_shi)
      } else {
        val.ban_jian_xing_shi = []
      }
      // 转成数组
      // eslint-disable-next-line no-eval
      if (val.fu_wu_dui_xiang) val.fu_wu_dui_xiang = eval(val.fu_wu_dui_xiang)
      // eslint-disable-next-line no-eval
      if (val.ban_jian_xing_shi) val.ban_jian_xing_shi = eval(val.ban_jian_xing_shi)
      // 图片为null处理
      val.san_ding_yi_ju_url = val.san_ding_yi_ju_url ? val.san_ding_yi_ju_url : ''
      val.fa_lv_fa_gui_yi_ju_url = val.fa_lv_fa_gui_yi_ju_url ? val.fa_lv_fa_gui_yi_ju_url : ''
      val.wen_jian_yi_ju_url = val.wen_jian_yi_ju_url ? val.wen_jian_yi_ju_url : ''
    },
    'formItem.type' (val) {
      // console.log('----form-type-----', typeof (val))
      val = val.toString()
    },
    baseType (data) {
      this.baseType = data.toString()
      this.formItem.type = data.toString()
      if (this.baseType !== '') this.$refs.optionModal.init({ type: this.baseType })
    }
  }
}
</script>

<style scoped lang="less">
    .tag-box {
        margin-bottom: 10px;
    }

    /deep/ .ivu-col-span-2 {
        margin-top: 23px;
    }

    .button-group {
        text-align: center;
    }

    .upload-icon {
        padding-left: 10px;
    }

    /deep/ .ivu-tooltip {
        /*width: 100%;*/
    }

    .excel-help {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
        color: orange;
        cursor: pointer;
    }

</style>
